@mixin gradient-bg($color) {
  @if $enable-gradients {
    background: $color
      linear-gradient(180deg, mix($body-bg, $color, 15%), $color)
      repeat-x;
  } @else {
    background-color: $color;
  }
}

@mixin gradient-x(
  $start-color: #555,
  $end-color: #333,
  $start-percent: 0%,
  $end-percent: 100%
) {
  background-image: linear-gradient(
    to right,
    $start-color $start-percent,
    $end-color $end-percent
  );
  background-repeat: repeat-x;
}

@mixin gradient-y(
  $start-color: #555,
  $end-color: #333,
  $start-percent: 0%,
  $end-percent: 100%
) {
  background-image: linear-gradient(
    to bottom,
    $start-color $start-percent,
    $end-color $end-percent
  );
  background-repeat: repeat-x;
}

@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
  background-image: linear-gradient($deg, $start-color, $end-color);
  background-repeat: repeat-x;
}

@mixin gradient-x-three-colors(
  $start-color: #00b3ee,
  $mid-color: #7a43b6,
  $color-stop: 50%,
  $end-color: #c3325f
) {
  background-image: linear-gradient(
    to right,
    $start-color,
    $mid-color $color-stop,
    $end-color
  );
  background-repeat: no-repeat;
}

@mixin gradient-y-three-colors(
  $start-color: #00b3ee,
  $mid-color: #7a43b6,
  $color-stop: 50%,
  $end-color: #c3325f
) {
  background-image: linear-gradient(
    $start-color,
    $mid-color $color-stop,
    $end-color
  );
  background-repeat: no-repeat;
}

@mixin gradient-radial($inner-color: #555, $outer-color: #333, $shape: circle) {
  background-image: radial-gradient($shape, $inner-color, $outer-color);
  background-repeat: no-repeat;
}

@mixin gradient-striped($color: rgba(255, 255, 255, 0.15), $angle: 45deg) {
  background-image: linear-gradient(
    $angle,
    $color 25%,
    transparent 25%,
    transparent 50%,
    $color 50%,
    $color 75%,
    transparent 75%,
    transparent
  );
}

@mixin scrollbar-theme($color: #ccc) {
  &::-webkit-scrollbar-track-piece {
    background: lighten($color, 10%);
  }
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  &::-webkit-scrollbar-thumb {
    background: $color;
    border-radius: 5px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: darken($color, 10%);
  }
}

@mixin btn-primary() {
  color: #fff;
  color: var(--primary-text);
  background-color: $primary;
  border-color: $primary-dark-1;
  background-color: var(--primary);
  border-color: var(--primary-dark-1);
  &.disabled,
  &:disabled {
    background-color: $primary;
    border-color: $primary-dark-1;
    background-color: var(--primary);
    border-color: var(--primary-dark-1);
  }
  &:not(:disabled):not(.disabled) {
    &:hover {
      color: #fff;
      color: var(--primary-text);
      background-color: $primary-dark-2;
      border-color: $primary-dark-3;
      background-color: var(--primary-dark-2);
      border-color: var(--primary-dark-3);
    }
    &:focus {
      color: #fff;
      color: var(--primary-text);
      background-color: $primary-dark-3;
      border-color: $primary-dark-4;
      background-color: var(--primary-dark-3);
      border-color: var(--primary-dark-4);
      box-shadow: $box-shadow-base;
    }
    &:active,
    &.active {
      color: #fff;
      color: var(--primary-text);
      background-color: $primary;
      border-color: $primary-dark-1;
      background-color: var(--primary);
      border-color: var(--primary-dark-1);
      &:focus {
        color: #fff;
        color: var(--primary-text);
        background-color: $primary-dark-3;
        border-color: $primary-dark-4;
        background-color: var(--primary-dark-3);
        border-color: var(--primary-dark-4);
        box-shadow: $box-shadow-base;
      }
    }
  }
}

@mixin btn-default {
  background-color: #fff;
  border-color: $border-color;
  &:not(:disabled):not(.disabled) {
    &:focus,
    &:hover {
      color: $primary;
      border-color: $primary-light-4;
      background-color: $primary-light-8;
      color: var(--primary);
      border-color: var(--primary-light-4);
      background-color: var(--primary-light-8);
    }
    &:focus {
      box-shadow: $box-shadow-base;
    }
  }
}

@mixin link-primary {
  color: $primary;
  color: var(--primary);
  &:hover,
  &:focus {
    color: $primary-dark-2;
    color: var(--primary-dark-2);
    text-decoration: none;
  }
}

@mixin placeholder-color($color: $placeholder-text-color) {
  &::-webkit-input-placeholder,
  &::-webkit-input-placeholder {
    color: $color;
  }
  &::-moz-placeholder {
    color: $color;
  }
  &::moz-placeholder {
    color: $color;
  }
  &::-ms-input-placeholder {
    color: $color;
  }
}
